<template>
  <div class="screen-container">
  <div class="screenContent">
      <BaiduMap/>
    <div class="header">
      <div class="title">智慧房屋数据平台</div>
    </div>
    
      <div class="left-panel">
        <div class="panel-item">
          <div class="panel-title">房屋隐患点比例</div>
          <div class="chart-wrapper" ref="chart1"></div>
        </div>
        <div class="panel-item">
          <div class="panel-title">房屋档案TOP5</div>
          <div class="chart-wrapper" ref="chart2"></div>
        </div>
        <div class="panel-item">
          <div class="panel-title">设备类型分布</div>
          <div class="chart-wrapper" ref="chart3"></div>
        </div>
      </div>

        <div class="data-overview">
          <div class="overview-item">
            <div class="icon-wrapper">
              <img src="@/assets/datascreen/center_header/icon_centered01.png" alt="房屋总数">
            </div>
            <div class="data-wrapper">
              <span class="num">3</span>
              <span class="label">房屋总数</span>
            </div>
          </div>
          <div class="overview-item">
            <div class="icon-wrapper">
              <img src="@/assets/datascreen/center_header/icon_centered02.png" alt="一般隐患">
            </div>
            <div class="data-wrapper">
              <span class="num">1</span>
              <span class="label">一般隐患房屋数</span>
            </div>
          </div>
          <div class="overview-item">
            <div class="icon-wrapper">
              <img src="@/assets/datascreen/center_header/icon_centered03.png" alt="严重隐患">
            </div>
            <div class="data-wrapper">
              <span class="num">0</span>
              <span class="label">严重隐患房屋数</span>
            </div>
          </div>
          <div class="overview-item">
            <div class="icon-wrapper">
              <img src="@/assets/datascreen/center_header/icon_centered04.png" alt="房屋档案">
            </div>
            <div class="data-wrapper">
              <span class="num">2</span>
              <span class="label">房屋档案数</span>
            </div>
          </div>
          <div class="overview-item">
            <div class="icon-wrapper">
              <img src="@/assets/datascreen/center_header/icon_centered05.png" alt="设备告警">
            </div>
            <div class="data-wrapper">
              <span class="num">0</span>
              <span class="label">设备告警数</span>
            </div>
          </div>
        </div>

        <div class="bottom-buttons">
          <div class="btn">房屋管理</div>
          <div class="btn">视频监控</div>

      <div class="right-panel">
        <div class="panel-item">
          <div class="panel-title">设备告警次数TOP5</div>
          <div class="chart-wrapper" ref="chart4"></div>
        </div>
        <div class="panel-item">
          <div class="panel-title">房屋类型占比</div>
          <div class="chart-wrapper" ref="chart5"></div>
        </div>
        <div class="panel-item">
          <div class="panel-title">近期房屋排查记录</div>
          <div class="list-wrapper">
            <div class="record-item" v-for="(item, index) in recordList" :key="index">
              <div class="status-icon" :class="item.type"></div>
              <div class="record-content">
                <div class="record-info">
                  <div class="record-time">{{item.time}}</div>
                  <div class="record-address">{{item.address}}</div>
                </div>
                <div class="record-status" :class="item.type">{{item.status}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import NanjingMap from './map.vue'
import BaiduMap from './baiduMap.vue'
export default {
  name: 'Screen',
  components: {
    BaiduMap
  },
  data() {
    return {
      charts: [],
      recordList: [
        { time: '2025-01-24', address: '禄口东路7号cent大厦', status: '存在一般安全隐患房屋', type: 'warning' },
        { time: '2018-01-01', address: '禄口东路7号cent大厦', status: '存在重大安全隐患房屋', type: 'danger' },
        { time: '2016-01-01', address: '禄口东路7号cent大厦', status: '存在一般安全隐患房屋', type: 'warning' }
      ]
    }
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.initCharts()
        window.addEventListener('resize', this.handleResize)
      }, 200)
    })
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
    this.charts.forEach(chart => {
      chart.dispose()
    })
  },
  methods: {
    initCharts() {
      try {
        // 房屋隐患点比例
        if (this.$refs.chart1) {
          const chart1 = echarts.init(this.$refs.chart1)
          this.charts.push(chart1)
          chart1.setOption({
            color: ['#00ffff', '#ff9900', '#ff0000'],
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              right: 10,
              top: 'center',
              itemGap: 15,
              formatter: function(name) {
                const data = chart1.getOption().series[0].data;
                const target = data.find(item => item.name === name);
                const index = data.findIndex(item => item.name === name);
                const colors = ['rgba(0,255,255,0.1)', 'rgba(255,153,0,0.1)', 'rgba(255,0,0,0.1)'];
                return `{back${index}|    ${name}  ${target.value}%}`;
              },
              textStyle: {
                rich: {
                  back0: {
                    padding: [8, 15, 8, 25],
                    borderRadius: 20,
                    backgroundColor: 'rgba(0,255,255,0.1)',
                    color: '#fff',
                    fontSize: 14,
                    align: 'left'
                  },
                  back1: {
                    padding: [8, 15, 8, 25],
                    borderRadius: 20,
                    backgroundColor: 'rgba(255,153,0,0.1)',
                    color: '#fff',
                    fontSize: 14,
                    align: 'left'
                  },
                  back2: {
                    padding: [8, 15, 8, 25],
                    borderRadius: 20,
                    backgroundColor: 'rgba(255,0,0,0.1)',
                    color: '#fff',
                    fontSize: 14,
                    align: 'left'
                  }
                }
              },
              icon: 'triangle',
              itemWidth: 6,
              itemHeight: 6,
              itemStyle: {
                borderWidth: 0
              },
              padding: [5, 10]
            },
            series: [{
              type: 'pie',
              radius: ['40%', '70%'],
              center: ['30%', '50%'],
              data: [
                { value: 66.67, name: '正常房屋' },
                { value: 33.33, name: '一般隐患' },
                { value: 0, name: '严重隐患' }
              ],
              label: {
                show: false
              },
              emphasis: {
                label: {
                  show: true,
                  formatter: '{b}: {d}%',
                  color: '#fff'
                }
              }
            }]
          })
        }

        // 房屋档案TOP5
        if (this.$refs.chart2) {
          const chart2 = echarts.init(this.$refs.chart2)
          this.charts.push(chart2)
          chart2.setOption({
            color: [{
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [{
                offset: 0,
                color: 'rgb(0,106,233)'
              }, {
                offset: 1,
                color: 'rgb(2,186,236)'
              }]
            }],
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                color: '#fff'
              },
              splitLine: {
                lineStyle: {
                  color: 'rgba(255,255,255,0.1)'
                }
              }
            },
            yAxis: {
              type: 'category',
              data: ['cent大厦', '测试房屋加地图', '测试房屋名称'],
              axisLine: {
                lineStyle: {
                  color: 'rgba(255,255,255,0.1)'
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                color: '#fff',
                fontSize: 14
              }
            },
            series: [{
              type: 'bar',
              data: [95, 80, 70],
              barWidth: 12,
              itemStyle: {
                borderRadius: [0, 20, 20, 0]
              }
            }]
          })
        }

        // 设备类型分布
        if (this.$refs.chart3) {
          const chart3 = echarts.init(this.$refs.chart3)
          this.charts.push(chart3)
          chart3.setOption({
            color: ['#00ffff', '#ff9900', '#7cffb2'],
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              right: 10,
              top: 'center',
              itemGap: 15,
              formatter: function(name) {
                const data = chart3.getOption().series[0].data;
                const target = data.find(item => item.name === name);
                const index = data.findIndex(item => item.name === name);
                const colors = ['rgba(0,255,255,0.1)', 'rgba(255,153,0,0.1)', 'rgba(124,255,178,0.1)'];
                return `{back${index}|    ${name}  ${target.value}%}`;
              },
              textStyle: {
                rich: {
                  back0: {
                    padding: [8, 15, 8, 25],
                    borderRadius: 20,
                    backgroundColor: 'rgba(0,255,255,0.1)',
                    color: '#fff',
                    fontSize: 14,
                    align: 'left'
                  },
                  back1: {
                    padding: [8, 15, 8, 25],
                    borderRadius: 20,
                    backgroundColor: 'rgba(255,153,0,0.1)',
                    color: '#fff',
                    fontSize: 14,
                    align: 'left'
                  },
                  back2: {
                    padding: [8, 15, 8, 25],
                    borderRadius: 20,
                    backgroundColor: 'rgba(124,255,178,0.1)',
                    color: '#fff',
                    fontSize: 14,
                    align: 'left'
                  }
                }
              },
              icon: 'rect',
              itemWidth: 6,
              itemHeight: 6,
              itemStyle: {
                borderWidth: 0
              },
              padding: [5, 10]
            },
            series: [{
              type: 'pie',
              radius: ['40%', '70%'],
              center: ['30%', '50%'],
              data: [
                { value: 50, name: '监控设备' },
                { value: 50, name: '网关设备' },
                { value: 0, name: '直连设备' }
              ],
              label: {
                show: false
              },
              emphasis: {
                label: {
                  show: true,
                  formatter: '{b}: {d}%',
                  color: '#fff'
                }
              }
            }]
          })
        }

        // 设备告警次数TOP5
        if (this.$refs.chart4) {
          const chart4 = echarts.init(this.$refs.chart4)
          this.charts.push(chart4)
          chart4.setOption({
            color: [{
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [{
                offset: 0,
                color: 'rgb(0,106,233)'
              }, {
                offset: 1,
                color: 'rgb(2,186,236)'
              }]
            }],
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                color: '#fff'
              },
              splitLine: {
                lineStyle: {
                  color: 'rgba(255,255,255,0.1)'
                }
              }
            },
            yAxis: {
              type: 'category',
              data: ['设备A', '设备B', '设备C', '设备D', '设备E'],
              axisLine: {
                lineStyle: {
                  color: 'rgba(255,255,255,0.1)'
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                color: '#fff',
                fontSize: 14
              }
            },
            series: [{
              type: 'bar',
              data: [120, 90, 70, 50, 30],
              barWidth: 12,
              itemStyle: {
                borderRadius: [0, 20, 20, 0]
              }
            }]
          })
        }

        // 房屋类型占比
        if (this.$refs.chart5) {
          const chart5 = echarts.init(this.$refs.chart5)
          this.charts.push(chart5)
          chart5.setOption({
            color: ['#00ffff', '#ff9900', '#7cffb2', '#7cffb2'],
            tooltip: {
              trigger: 'item'
            },
            legend: {
              orient: 'vertical',
              right: 10,
              top: 'center',
              itemGap: 15,
              formatter: function(name) {
                const data = chart5.getOption().series[0].data;
                const target = data.find(item => item.name === name);
                const index = data.findIndex(item => item.name === name);
                return `{back${index}|    ${name}  ${target.value}%}`;
              },
              textStyle: {
                rich: {
                  back0: {
                    padding: [8, 15, 8, 25],
                    borderRadius: 20,
                    backgroundColor: 'rgba(0,255,255,0.1)',
                    color: '#fff',
                    fontSize: 14,
                    align: 'left'
                  },
                  back1: {
                    padding: [8, 15, 8, 25],
                    borderRadius: 20,
                    backgroundColor: 'rgba(255,153,0,0.1)',
                    color: '#fff',
                    fontSize: 14,
                    align: 'left'
                  },
                  back2: {
                    padding: [8, 15, 8, 25],
                    borderRadius: 20,
                    backgroundColor: 'rgba(124,255,178,0.1)',
                    color: '#fff',
                    fontSize: 14,
                    align: 'left'
                  },
                  back3: {
                    padding: [8, 15, 8, 25],
                    borderRadius: 20,
                    backgroundColor: 'rgba(124,255,178,0.1)',
                    color: '#fff',
                    fontSize: 14,
                    align: 'left'
                  }
                }
              },
              icon: 'rect',
              itemWidth: 6,
              itemHeight: 6,
              itemStyle: {
                borderWidth: 0
              },
              padding: [5, 10]
            },
            series: [{
              type: 'pie',
              radius: ['40%', '70%'],
              center: ['30%', '50%'],
              data: [
                { value: 0, name: '平房' },
                { value: 50, name: '底层' },
                { value: 0, name: '多层' },
                { value: 50, name: '高层' }
              ],
              label: {
                show: false
              },
              emphasis: {
                label: {
                  show: true,
                  formatter: '{b}: {d}%',
                  color: '#fff'
                }
              }
            }]
          })
        }
      } catch (error) {
        console.error('初始化图表失败:', error)
      }
    },
    handleResize() {
      if (this.charts.length) {
        this.charts.forEach(chart => {
          chart && chart.resize()
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// .screenContent{
//   width:
// }
.screen-container {
  width: 100%;
  height: 100vh;
  // background: #061d3c url('~@/assets/datascreen/pic_bg.png') no-repeat center center;
  background: linear-gradient(  #050234 0%, #05013C 100%);
  color: #fff;
  overflow: hidden;
  position: relative;
  
  z-index:1;
  
  .header {
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    // background:url('~@/assets/datascreen/newScreen/top.png') no-repeat center center;
    // background-size:100% 100%;
    z-index:2;
    .title {
      font-size: 32px;
      font-weight: bold;
      background: linear-gradient(to bottom, #fff, #7cdeff);
      -webkit-background-clip: text;
      color: transparent;
    }
  }


    
    .left-panel,
    .right-panel {
      width: 25%;
      .panel-item {
        height: 32%;
        // background: rgba(0,47,167,0.2);
        // border: 1px solid #0072ff;
        border-radius: 4px;
        margin-bottom: 10px;
        padding: 10px;
        
        .panel-title {
          font-size: 16px;
          color: #fff;
          margin-bottom: 10px;
          height: 40px;
          line-height: 40px;
          background: url('~@/assets/datascreen/pic_title_bg.png') no-repeat;
          background-size: 100% 100%;
          padding-left: 20px;
          position: relative;
        }

        .chart-wrapper {
          height: calc(100% - 50px);
          width: 100%;
        }

        .list-wrapper {
          height: calc(100% - 50px);
          overflow-y: auto;
          padding: 0 10px;
          
          .record-item {
            display: flex;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            
            .status-icon {
              width: 50px;
              height: 50px;
              margin-right: 15px;
              flex-shrink: 0;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 14px;
              color: #fff;
              position: relative;
              
              &.warning {
                background: url('~@/assets/datascreen/other/pic_circleblue.png') no-repeat center;
                background-size: contain;
                &::after {
                  content: '一般';
                  position: absolute;
                }
              }
              
              &.danger {
                background: url('~@/assets/datascreen/other/pic_circlered.png') no-repeat center;
                background-size: contain;
                &::after {
                  content: '重大';
                  position: absolute;
                }
              }
            }

            .record-content {
              flex: 1;
              display: flex;
              align-items: center;
              justify-content: space-between;
              gap: 15px;
              
              .record-info {
                display: flex;
                flex-direction: column;
                gap: 5px;
                width: 200px;

                .record-time {
                  font-size: 14px;
                  color: #00ffff;
                }
                
                .record-address {
                  font-size: 14px;
                  color: #fff;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                }
              }
              
              .record-status {
                font-size: 14px;
                width: 160px;
                text-align: right;
                flex-shrink: 0;
                
                &.warning {
                  color: #00ffff;
                }
                
                &.danger {
                  color: #ff0000;
                }
              }
            }
          }

          &::-webkit-scrollbar {
            width: 4px;
          }
          
          &::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.2);
            border-radius: 2px;
          }
        }
      }
    }
    .left-panel{
      position: fixed;
      left:0;
      top:60px;
      height:calc(100% - 80px);
      width:23%;


    }
    .right-panel{
      position: fixed;
      right:0;
      top:60px;
      height:calc(100% - 80px);
      width:23%;

    }


      
      .data-overview {
        position: fixed;
        width: 50%;   
        left:0;
        right:0;
        margin:auto;     
        display: flex;
        justify-content: space-around;
        margin-top: 40px;
        margin-bottom: 15px;
        padding: 18px 8px;
        background: url('~@/assets/datascreen/center_header/pic_centeredbg.png') no-repeat;
        background-size: 100% 100%;
        
        .overview-item {
          display: flex;
          align-items: center;
          gap: 6px;

          .icon-wrapper {
            width: 58px;
            height: 58px;
            img {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
          }

          .data-wrapper {
            display: flex;
            flex-direction: column;
            gap: 1px;
            align-items: center;
            
            .num {
              font-size: 22px;
              font-weight: bold;
              color: #0ff;
              line-height: 1;
            }
            
            .label {
              font-size: 12px;
              color: #fff;
              white-space: nowrap;
            }
          }
        }
      }

      .map-container {
        height: calc(100% - 150px);
        
        background: rgba(0,47,167,0.2);
        border: 1px solid #0072ff;
        border-radius: 4px;
      }

      .bottom-buttons {
        height:146px;
        position: fixed;
        width: 100%;
        // background:url('~@/assets/datascreen/newScreen/bottom.png') no-repeat center center;
        // background-size:100% 100%;   
        left:0;
        right:0;
        bottom:0;
        display: flex;
        justify-content: center;
        
        .btn {
          height:30px;
          padding: 8px 20px;
          background: #0072ff;
          border-radius: 4px;
          cursor: pointer;
          &:hover {
            background: #0058cc;
          }
        }
    }
}
</style>